/* 连线特效动画样式 */

/* 电流流动动画 */
@keyframes current-flow {
  0% { 
    stroke-dasharray: 0, 100; 
    stroke-dashoffset: 0;
  }
  50% { 
    stroke-dasharray: 50, 50; 
    stroke-dashoffset: -25;
  }
  100% { 
    stroke-dasharray: 100, 0; 
    stroke-dashoffset: -50;
  }
}

/* 水流动画 */
@keyframes water-flow {
  0%, 100% { 
    opacity: 0.3; 
    stroke-dasharray: 0, 100; 
    stroke-dashoffset: 0;
  }
  50% { 
    opacity: 1; 
    stroke-dasharray: 50, 50; 
    stroke-dashoffset: -25;
  }
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% { 
    opacity: 0.5; 
    stroke-width: 2px; 
    transform: scale(1);
  }
  50% { 
    opacity: 1; 
    stroke-width: 4px; 
    transform: scale(1.1);
  }
}

/* 虚线移动动画 */
@keyframes dash-move {
  0% { 
    stroke-dashoffset: 0; 
  }
  100% { 
    stroke-dashoffset: 8; 
  }
}

/* 渐变流动动画 */
@keyframes gradient-flow {
  0% { 
    stroke-dasharray: 0, 100; 
    stroke-dashoffset: 0;
  }
  50% { 
    stroke-dasharray: 50, 50; 
    stroke-dashoffset: -25;
  }
  100% { 
    stroke-dasharray: 100, 0; 
    stroke-dashoffset: -50;
  }
}

/* 方向箭头动画 */
@keyframes arrow-bounce {
  0%, 100% { 
    transform: translateX(0); 
  }
  50% { 
    transform: translateX(3px); 
  }
}

/* 电流闪烁效果 */
@keyframes current-flicker {
  0%, 100% { 
    opacity: 0.8; 
  }
  25% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.6; 
  }
  75% { 
    opacity: 0.9; 
  }
}

/* 水流波纹效果 */
@keyframes water-ripple {
  0% { 
    stroke-width: 2px; 
    opacity: 0.8; 
  }
  50% { 
    stroke-width: 4px; 
    opacity: 0.4; 
  }
  100% { 
    stroke-width: 2px; 
    opacity: 0.8; 
  }
}

/* 脉冲扩散效果 */
@keyframes pulse-expand {
  0% { 
    stroke-width: 2px; 
    opacity: 1; 
  }
  100% { 
    stroke-width: 8px; 
    opacity: 0; 
  }
}

/* 虚线流动效果 */
@keyframes dash-flow {
  0% { 
    stroke-dashoffset: 0; 
  }
  100% { 
    stroke-dashoffset: 16; 
  }
}

/* 渐变呼吸效果 */
@keyframes gradient-breathe {
  0%, 100% { 
    opacity: 0.6; 
  }
  50% { 
    opacity: 1; 
  }
}

/* 特效组合动画 */
@keyframes combined-effect {
  0% { 
    stroke-dasharray: 0, 100; 
    opacity: 0.5; 
    stroke-width: 2px; 
  }
  25% { 
    stroke-dasharray: 25, 75; 
    opacity: 0.8; 
    stroke-width: 3px; 
  }
  50% { 
    stroke-dasharray: 50, 50; 
    opacity: 1; 
    stroke-width: 4px; 
  }
  75% { 
    stroke-dasharray: 75, 25; 
    opacity: 0.8; 
    stroke-width: 3px; 
  }
  100% { 
    stroke-dasharray: 100, 0; 
    opacity: 0.5; 
    stroke-width: 2px; 
  }
}

/* 动画性能优化 */
.animated-line line {
  will-change: stroke-dasharray, stroke-dashoffset, opacity, stroke-width;
  transform-origin: center;
}

/* 动画暂停控制 */
.animated-line.paused line {
  animation-play-state: paused;
}

/* 动画速度控制 */
.animated-line.slow line {
  animation-duration: 3s !important;
}

.animated-line.fast line {
  animation-duration: 0.5s !important;
}

/* 动画方向控制 */
.animated-line.reverse line {
  animation-direction: reverse;
}

.animated-line.alternate line {
  animation-direction: alternate;
}

/* 动画缓动函数 */
.animated-line.ease-in line {
  animation-timing-function: ease-in;
}

.animated-line.ease-out line {
  animation-timing-function: ease-out;
}

.animated-line.ease-in-out line {
  animation-timing-function: ease-in-out;
}

.animated-line.linear line {
  animation-timing-function: linear;
}

/* 动画循环控制 */
.animated-line.infinite line {
  animation-iteration-count: infinite;
}

.animated-line.once line {
  animation-iteration-count: 1;
}

.animated-line.twice line {
  animation-iteration-count: 2;
}

/* 动画延迟控制 */
.animated-line.delayed line {
  animation-delay: 0.5s;
}

/* 动画填充模式 */
.animated-line.forwards line {
  animation-fill-mode: forwards;
}

.animated-line.backwards line {
  animation-fill-mode: backwards;
}

.animated-line.both line {
  animation-fill-mode: both;
}

/* 响应式动画 */
@media (prefers-reduced-motion: reduce) {
  .animated-line line {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .animated-line line {
    stroke-width: 3px !important;
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .animated-line line {
    filter: brightness(1.2);
  }
}

/* 动画调试模式 */
.debug-animations .animated-line line {
  outline: 1px solid red;
}

/* 动画性能监控 */
.animated-line.monitor line {
  animation-timing-function: steps(10);
} 